<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" @open="loadAllRoles" @close="handleClose">
    <!-- 角色列表 -->
    <el-checkbox-group v-model="roleIds" v-loading="loading">
      <!-- label绑定的是选中的角色id -->
      <el-checkbox
        v-for="item in AllRolesList"
        :key="item.id"
        :label="item.id"
      >{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button type="primary" size="small" @click="assignRole">确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { reqGetRoleList } from '@/api/setting.js'
import { getDetailInfo } from '@/api/user'
import { reqAssignRoles } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 分配角色的员工id
    userId: {
      type: String,
      required: true
    },
    // 控制弹窗的显示与隐藏
    showRoleDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // 控制加载状态
      loading: false,
      // 选中的角色列表
      roleIds: [],
      // 所有的角色列表
      AllRolesList: []
    }
  },
  methods: {
    // 分配角色, 提交数据
    async assignRole() {
      try {
        const res = await reqAssignRoles({
          id: this.userId,
          roleIds: this.roleIds
        })
        if (res.code === 10000) {
          // 关闭弹窗
          this.handleClose()
          // 提示
          this.$message.success('分配角色成功')
        }
      } catch (error) {
        this.$message.error('分配角色失败')
      }
    },
    // 获取角色列表
    loadAllRoles() {
    //   try {
      // 发送请求之前 ,开启加载状态
      this.loading = true
      // 获取用户默认的角色数据
      const info = getDetailInfo(this.userId)
      // if (info.code === 10000) {
      //   this.roleIds = info.data.roleIds
      // }
      // 获取所有角色列表数据
      const res = reqGetRoleList({
        page: 1,
        pagesize: 10000
      })
      Promise.all([info, res]).then((results) => {
        // results是一个数组 , 数组中两个值 ,一个是info , 一个是res
        // console.log(results)
        this.roleIds = results[0].data.roleIds
        this.AllRolesList = results[1].data.rows
        // 发送请求之后, 关闭加载状态
        this.loading = false
      }).catch(() => {
        this.$message.error('获取所有角色列表失败')
      })

      // if (res.code === 10000) {
      //   this.AllRolesList = res.data.rows
      // }
    //   } catch (error) {
    //     this.$message.error('获取所有角色列表失败')
    //   } finally {
    //     // 发送请求之后 ,关闭加载状态
    //     this.loading = false
    //   }
    },
    // 控制弹窗关闭
    handleClose() {
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>
